<template>
	<notice :notice.sync="notice"></notice>
	<div class="navbar navbar-default">
		<ul class="nav navbar-nav nav-result">
            <li><a href="javasript:;" v-show="!loading">{{quiz.qus_name}}</a></li>
        </ul>
	</div>
	<div class="loading" v-show="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="stuResContainer" v-show="!loading">
		<div class="row page-title">
			<div class="col-md-1 col-md-offset-2">
				<span class="stu-name">{{ student.stu_name }}</span> 
			</div>
			<div class="col-md-2">
				<span class="text-muted">学号: {{ student.stu_number }}</span>
			</div>
			<div class="col-md-2 col-md-offset-3">
				<span class="stu-score">成绩: <strong class="text-danger">{{ student.stu_score&&student.stu_score.stu_score }}</strong></span>
			</div>
		</div>
		<template v-for="que in questions">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<div class="que-judge" >
						<div class="panel panel-default display-panel static">
							<div class="panel-body">
								<div class="box-title">
									<template v-if="que.que_type<4">
										<span class="is-cor glyphicon glyphicon-ok" v-if="que.is_correct==1"></span>
										<span class="is-cor glyphicon glyphicon-remove" v-else></span>
									</template>
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span class="que-score">分值 {{ que.que_score }}</span>
									<span class="text-danger">答案 {{ que.que_answer }}</span>
								</div>
								<div class="box-body">
									<p>{{{ que.que_content }}}</p>
									<div class="radio" v-if="que.que_type==0" v-for="item in que.que_items" track-by="$index">
										<label><input type="radio" v-bind:name="'display'+que.que_num" v-bind:value="$index" v-model="que.stu_answer" disabled>
											{{ item }}
										</label>
									</div>
									<div class="radio" v-if="que.que_type==1" v-for="item in que.que_items" track-by="$index">
										<label>
											<input type="radio" v-bind:name="'display'+que.que_num" v-bind:value="$index" v-model="que.stu_answer" disabled>
											{{ OPTIONTEXT[$index] }}、 {{ item }}
										</label>
									</div>
									<div class="checkbox" v-if="que.que_type==2" v-for="item in que.que_items" track-by="$index">
										<label><input type="checkbox" v-bind:name="'display'+que.que_num" v-bind:value="$index" v-model="que.stu_answer" disabled>
											{{ OPTIONTEXT[$index] }}、 {{ item }}
										</label>
									</div>
									<textarea style="resize: none"v-if="que.que_type==3 || que.que_type==4" type="text" class="que-area-static que-content" rows="1" v-model="que.stu_answer" readonly></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import Notice from '../../Component/Notice/Notice';

	export default {
		created: function() {
			this.qusId = location.search.substring(1).split("&")[0].split("=")[1];
			this.stuId = location.search.substring(1).split("&")[1].split("=")[1];
			this.getTestPaper();
		},
		data() {
			return {
				stuId: -1,
				qusId: -1,
				student: {},
				questions: [],
				typeValue : ["判断题", "单选题", "多选题", "填空题", "简答题"],
				OPTIONTEXT: ['A','B','C','D','E','F','G','H'],
				quiz: {},
				notice: {type: 0, msg: ""},
				loading: false
			}
		},
		components: {
			Notice
		},
		methods: {
			getTestPaper: function() {
				this.loading = true;
				this.$http.post('/stuQue/getStuQuizResult', {stu_id: this.stuId, qus_id: this.qusId}).then(function(resp) {
					this.loading = false;
					if (resp.data.status === 1) {
						var data = resp.data.data,
							i,
							len = data.question.length,
							questions = data.question;
						questions.forEach((value, index) => {
							if (value.que_type == 0) {
								value.que_answer = value.que_answer == 0 ? "对" : "错";
							}
							else if (value.que_type == 1 || value.que_type == 2) {
								value.que_answer = value.que_answer.split("").map(function(item, index, array) {
									return String.fromCharCode(65+parseInt(item));
								}).join('、');
								if (value.que_type == 2)
									value.stu_answer = value.stu_answer && value.stu_answer.split("").map(function(item, index, array) {
										return parseInt(item)
									});
							} else if (value.que_type == 3 || value.que_type == 4) {
								if (value.stu_answer === null) {
									value.stu_answer = "[未作答]";
								}
							}
							value.que_items = [];
                            for (let i = 1; i <= 8; i++) {
                                if (value["que_item"+i]) {
                                    value.que_items.push(value["que_item"+i]);
                                }
                                delete value["que_item"+i];
                            }

						})
						this.questions = questions;
						this.student = data.student;
						this.quiz = data.quiz;
					} else {
						this.notice = {type: 0, msg: resp.message};
					}
				}, function(resp) {
					// error callback
			        this.notice = {type: 0, msg: resp.statusText};
			        this.loading = false;
				})
			}
		}
	}
</script>

<style>
#question-container .row {
    margin-top: 20px;
}

.quiz-name, .stu-name{
    font-size: 18px;
    margin-right: 10px;
}

#scrollspy .affix {
    top: 10px;
}

#question-container a {
    /*color: #818181;*/
}

#question-container a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#question-container a:focus {
    text-decoration: none;
}

ul.nav-tabs {
    background-color: #fff;
    border: 1px solid #ecf0f1;
}

ul.affix-top,
ul.affix {
    width: 160px;
}

ul.nav-tabs .btn {
    width: 100%;
    color: #000;
    padding: 16px 0;
    border-top: 1px solid #f2f2f2;
}

ul.nav-tabs .btn-link:hover {
    text-decoration: none;
}

ul.nav-tabs .btn-link:focus {
    outline: 0;
}

ul.nav-tabs li:hover {
    box-shadow: 0 0 1px #868686;
}

ul.nav-tabs li:first-child {
    padding: 14px 0;
    font-size: 16px;
    text-align: center;
    background-color: #f5f5f5;
}

.nav-stacked>li+li {
    margin-top: 0;
}

.container {
    margin-bottom: 100px;
}

.edit-panel, .display-panel {
    border-color: #ecf0f1;
    border-width: 1px;
    border-radius: 0;
}

.display-panel {
    border-width: 1px 1px 0px 1px;
}

.panel .box-title .que-score {
    width: 40px;
    height: 25px;
    margin-right: 30px;
}

.panel .box-title .que-title{
    margin-right: 20px;
}

.edit-panel .panel-body,
.display-panel .panel-body {
    padding: 20px 30px;
}

.display-panel .box-body,
.edit-panel .box-body {
    margin-top: 10px;
}

.edit-panel .panel-footer {
    padding: 15px 20px; 
}

.edit-panel .panel-footer .btn{
    margin-right: 10px;
}

.edit-btn-group a{
    margin-left: 5px;
}

.edit-btn-group {
    display: block;
}

.panel:hover {
    box-shadow: 0 0 4px #c6c6c6;
}

.edit-panel .box-body p,
.display-panel .box-body p {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.display-panel .edit-btn-group {
    display: none;
}

.display-panel:hover .edit-btn-group {
    display: block;
}

.edit-panel {
    box-shadow: 0 0 4px #c6c6c6;
    margin-top: 15px;
    margin-bottom: 15px;
}

.display-panel {
    margin-bottom: 1px;
}

.que-content {
    width: 100%;
    font-size: 16px;
}

.que-area {
    border: 2px solid #fff;
}

.que-area:hover {
    border-bottom: 2px solid #aaa;
}

.que-area:focus{
    border-bottom: 2px solid #3498db;
    outline: 0;
}

.que-area-static {
    border: 1px solid #fff;
    border-bottom: 1px solid #c8c8c8;
}

.que-area-static:focus {
    outline: 0;
    border-bottom: 1px solid #c8c8c8;
}

.que-item {
    display: inline-block;
    vertical-align: middle;
    width: 90%;
}

.radio, .checkbox {
    margin-bottom: 18px;
}

a.del-item {
    display: none;
    margin-top: 8px;
}

.radio:hover a.del-item,
.checkbox:hover a.del-item {
    display: block;
}

.is-cor {
    position: absolute;
    top: 24px;
    left: 25px;
}

.box-title .glyphicon-ok {
    color: #27ae60;
}

.box-title .glyphicon-remove {
    color: #c0392b;
}

.page-title {
    margin-top: 10px;
    margin-bottom: 25px;
}

.stu-score {
    font-size: 16px;
}

.nav-result li {
    margin-left: 20px;
    font-size: 16px;
}
</style>